import React, { useEffect, useState } from 'react';
import styles from './toolBar.less';
export default () => {
  const [backTopShow, setBackTopShow] = useState(false);
  useEffect(() => {
    window.addEventListener('scroll', (event: any) => {
      setBackTopShow(window.scrollY > 500);
    });
  }, []);
  return (
    <div className={styles.toolBar}>
      <div className={styles.barBlock}>
        <img src="https://i8.mifile.cn/b2c-mimall-media/98a23aae70f25798192693f21c4d4039.png" />
        <span>手机APP</span>
      </div>
      <div className={styles.barBlock}>
        <img src="https://i8.mifile.cn/b2c-mimall-media/55cad219421bee03a801775e7309b920.png" />
        <span>个人中心</span>
      </div>
      <div className={styles.barBlock}>
        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/12eb0965ab33dc8e05870911b90f3f13.png" />
        <span>售后服务</span>
      </div>
      <div className={styles.barBlock}>
        <img src="https://i8.mifile.cn/b2c-mimall-media/4f036ae4d45002b2a6fb6756cedebf02.png" />
        <span>人工客服</span>
      </div>
      <div className={styles.barBlock}>
        <img src="https://i8.mifile.cn/b2c-mimall-media/d7db56d1d850113f016c95e289e36efa.png" />
        <span>购物车</span>
      </div>
      <div
        className={styles.barBlock}
        style={
          backTopShow
            ? { marginTop: '20px', cursor: 'pointer' }
            : { display: 'none' }
        }
        onClick={() => {
          window.scrollTo(0, 0);
        }}
      >
        <img src="https://i1.mifile.cn/f/i/2018/home/totop.png" />
        <span>回顶部</span>
      </div>
    </div>
  );
};
